<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>12图像</title>
    </head>
    <style type="text/css">
        canvas{border:solid 2px #CCC;}
        #nav{margin: 20px auto;text-align:center;}
    </style>
    <script type="text/javascript">
        function $$(id){
            return document.getElementById(id);
        }
        function pageLoad(){
            var can = $$('can');
            var ctx = can.getContext('2d');
            //createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
            var g1 = ctx.createRadialGradient(580,120, 0, 600, 240, 200);
            g1.addColorStop(0.1, 'rgb(0,0,255)');  
            g1.addColorStop(1, 'rgb(0,0,60)');
            ctx.fillStyle = g1;
            ctx.beginPath();
            ctx.arc(600, 240, 200, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        }
    </script>
    <body onload="pageLoad();">
    <div id="nav">
        <canvas id="can" width="1200px" height="480px">4</canvas>
    </div>
    </body>
</html>